<template>
  <div class="L-tag-container">
    <van-cell-group inset class="L-tag-box">
      <div class="L-detail-title-row">
        <span class="L-text L-primary-text-color">
          <i class="iconfont icon-yuanzhu" style="color:#1683f7"></i>
          可选
        </span>
      </div>
      <div class="L-tag-row">
        <span @click="handleSelect(item)" v-for="(item,index) in tagsArr" :key="index" :class="item.tagclass">{{item.sname}}</span>
        <span @click="handleSelect(item,true)" v-for="(item,index) in newTagArr" :key="index" :class="item.tagclass">{{item.sname}}</span>
      </div>
      <van-divider />
      <div class="L-tag-operate-row L-margin-top-20">
        <div class="L-operate-btn" @click="showDialog = true"> + 新增</div>
        <div class="L-operate-btn" @click="handleSelectAll">
          <i class="iconfont icon-zhankai L-mini-text"></i>
          全部添加
        </div>
      </div>
    </van-cell-group>

    <van-cell-group inset class="L-margin-top-20 L-tag-box ">
      <div class="L-detail-title-row">
        <span class="L-text L-primary-text-color">
          <i class="iconfont icon-yuanzhu" style="color:#1683f7"></i>
          已选
        </span>
      </div>
      <div class="L-tag-row">
        <template v-for="(item,index) in selectedArr" :key="index">
          <span :class="item.tagclass">{{item.sname}} <i class="iconfont icon-shanchu6" @click="handleDelete(index)"></i> </span>
        </template>
        <template v-for="(item,index) in newSelectedTagArr" :key="index">
          <span :class="item.tagclass">{{item.sname}} <i class="iconfont icon-shanchu6" @click="handleDelete(index,true)"></i> </span>
        </template>
      </div>
      <van-divider />
      <div class="L-tag-operate-row L-margin-top-20">
        <div class="L-operate-btn" style="width:80%" @click="handleDeleteAll">
          <i class="iconfont icon-shanchu1 L-small-text"></i>
          全部删除
        </div>
      </div>
    </van-cell-group>

    <div class="L-bottom-row ">
      <van-button @click="handleCancle" color="#C0C4CC" round type="default" style="width: 120px;">取消</van-button>
      <van-button @click="handleSubmit" round type="primary" style="width: 120px;">提交</van-button>
    </div>

    <van-dialog v-model:show="showDialog" title="新增标签" show-cancel-button :beforeClose="beforeClose" @confirm="handleAddNew">
      <van-cell-group class="L-margin-top-20">
        <van-field v-model="newTagText" placeholder="请输入标签内容" />
        <div style="padding:10px">
          <div>
            <span class="L-small-text L-regular-text-color" style="margin-right:10px;margin-left:5px">预览 : </span>
            <span v-if="newTagText.length>0" :class="newClass">{{newTagText}}</span>
          </div>
          <div>
            <span @click="newClass = item " v-for="(item,index) in classList" :key="index" :class="item" style="margin:5px">默认样式</span>
          </div>
        </div>
      </van-cell-group>

    </van-dialog>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits } from "vue";
import { apiConfigurable } from "@/request/api/api";
import { useRouter, useRoute } from "vue-router";
import { showToast, showLoadingToast } from "vant";

const router = useRouter();
const route = useRoute();

const emits = defineEmits(["handleTagConfirm", "handleTagCancle"]);

const tagsArr = ref([]);
const selectedArr = ref([]);

const showDialog = ref(false);
const closeDialog = ref(false);

const newTagText = ref("");
const newClass = ref("tag tag-large tag-blue-light");

const newTagArr = ref([]);
const newSelectedTagArr = ref([]);

const classList = [
  "tag tag-large tag-red-deep",
  "tag tag-large tag-red-light",
  "tag tag-large tag-orange-deep",
  "tag tag-large tag-orange-light",
  "tag tag-large tag-yellow-deep",
  "tag tag-large tag-yellow-light",
  "tag tag-large tag-green-deep",
  "tag tag-large tag-green-light",
  "tag tag-large tag-cyan-deep",
  "tag tag-large tag-cyan-light",
  "tag tag-large tag-blue-deep",
  "tag tag-large tag-blue-light",
  "tag tag-large tag-purple-deep",
  "tag tag-large tag-purple-light",
  "tag tag-large tag-pink-deep",
  "tag tag-large tag-pink-light",
  "tag tag-large tag-gray-deep",
  "tag tag-large tag-gray-light",
];

function getData() {
  const url = "tags.getlist.do";
  const params = {
    bo: route.query.idobject,
    scode: route.query.itemid,
  };
  apiConfigurable(url, params).then((res) => {
    if (res.code === 0) {
      tagsArr.value = res.data.botags;
      selectedArr.value = res.data.tags;
    }
  });
}

function handleCancle() {
  emits("handleTagCancle");
}

function handleSubmit() {
  const url = "tags.editsave.do";

  const selectednewtags = newSelectedTagArr.value.map((item) => {
    return { ...item };
  });
  const selectedtagsNameArr = newSelectedTagArr.value.map((item) => item.sname);
  const newtags = newTagArr.value
    .filter((item) => {
      return selectedtagsNameArr.indexOf(item.sname) === -1;
    })
    .map((item) => {
      return { ...item };
    });

  const selectedtags = selectedArr.value.map((item) => {
    return { ...item };
  });

  //   console.log(selectednewtags,newtags,selectedtags);

  //   return;

  const params = {
    bo: route.query.idobject,
    scode: route.query.itemid,
    newtags: JSON.stringify(newtags),
    selectednewtags: JSON.stringify(selectednewtags),
    selectedtags: JSON.stringify(selectedtags),
  };

  apiConfigurable(url, params).then((res) => {
    if (res.code === 0) {
      showToast("提交成功");
      emits("handleTagConfirm");
    }
  });
}

function beforeClose(action: string) {
  if (action === "confirm" && closeDialog.value === false) {
    return false;
  }

  return true;
}

function handleAddNew() {
  if (newTagText.value === "") {
    showToast("请输入标签内容");
    closeDialog.value = false;
    return;
  }

  if (tagsArr.value.some((item) => newTagText.value === item.sname)) {
    showToast("该标签已存在");
    closeDialog.value = false;
    return;
  }

  if (newTagArr.value.some((item) => newTagText.value === item.sname)) {
    showToast("该标签已存在");
    closeDialog.value = false;
    return;
  }

  const tagclass = newClass.value;
  newTagArr.value.push({ sname: newTagText.value, tagclass });

  newTagText.value = "";
  newClass.value = "tag tag-large tag-blue-light";
  closeDialog.value = true;
}

// 删除
function handleDelete(index: number, isNewTag = false) {
  if (isNewTag) {
    newSelectedTagArr.value.splice(index, 1);
  } else {
    selectedArr.value.splice(index, 1);
  }
}
//全部删除
function handleDeleteAll() {
  selectedArr.value = [];
  newSelectedTagArr.value = [];
}

// 全部添加
function handleSelectAll() {
  tagsArr.value.forEach((item) => {
    if (selectedArr.value.every((sitem) => sitem.id !== item.id)) {
      selectedArr.value.push(item);
    }
  });

  newTagArr.value.forEach((item) => {
    if (newSelectedTagArr.value.every((sitem) => sitem.id !== item.id)) {
      newSelectedTagArr.value.push(item);
    }
  });
}
// 选择
function handleSelect(selectItem, isNewTag = false) {
  if (selectedArr.value.some((item) => item.id === selectItem.id)) {
    showToast("该标签已选");
  } else {
    if (isNewTag) {
      newSelectedTagArr.value.push(selectItem);
    } else {
      selectedArr.value.push(selectItem);
    }
  }
}

onMounted(() => {
  getData();
});
</script>

<style scoped>
.L-tag-container {
  background: #f0f2f5;
  width: 100%;
  height: 100%;
  padding-top: 20px;
  position: relative;
}
.L-tag-box {
  /* padding:10px */
  /* min-height: 200px; */
  position: relative;
}
.L-tag-box .L-tag-operate-row {
  /* position: absolute;
    bottom: 10px;
    right: 0; */
  width: 100%;
  height: 40px;

  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 10px auto;
}

.L-tag-row {
  padding: 5px 15px;
}
</style>